<template>
	<view class="content">
		<view class="nav-style" :style="'height:'+navHeight+'px;padding-top:'+statusBarHeight+'px;'" v-if="navHeight">
			<view class="height-bg"
				:style="top ? 'display:flex;justify-content:flex-end;height:'+(navHeight+statusBarHeight)+'px;z-index:10;' : '' ">
				<image :src="imageUrl + 'my-home/headerBg.jpg'" mode="widthFix" @load="imageLoad"></image>
			</view>
			<!-- @click="toChangeAddress()" imageUrl -->
			<view class="baseNames">哇咔咔wakaka</view>
		</view>
		<!--  -->
		<!-- 个人资料 -->
		<view :style="'height:' + imageHeight + 'rpx;' " class="baseUsers">
			<view @click="userInfo" class="header">
				<view class="avatar">
					<image mode="aspectFill" :src="userData.face ? userData.face : imageUrl + 'noPic.jpg'"></image>
				</view>
				<view>
					<view class="nick-name">
						{{ userData.nickName ? userData.nickName : '未登录' }}
						<i v-if="userData.haveCameraman">
							<image :src="imageUrl + 'index/yp-active.png'" mode="aspectFit"></image>
							<text>已认证摄影师</text>
						</i>
					</view>
					<view class="xinqing">{{ tips[tipsId] }}</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="orderTags">
			<view class="orderTitle">
				AIGC订单
			</view>
			<view class="orderLists">
				<view class="fullOrder" v-for="(item,index) in orderList" :key="index" @click="orderBtn(item,'order')">
					<image :src="item.image" mode="aspectFit"></image>
					<p>{{ item.title }}</p>
					<!-- <i v-if="index == 1 || index == 2">1</i> -->
				</view>
			</view>
		</view>
		<view class="orderTags">
			<view class="orderTitle">
				约拍订单
			</view>
			<view class="orderLists">
				<view class="fullOrder" v-for="(item,index) in tagsList" :key="index" @click="orderBtn(item,'yuepai')">
					<view>
						<image :src="item.image" mode="aspectFit"></image>
						<p>{{ item.title }}</p>
						<!-- <i v-if="index == 1 || index == 2">1</i> -->
					</view>
					<!-- <view v-else>
						<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
							<image :src="item.image" mode="aspectFit"></image>
							<p>{{item.title}}</p>
						</button>
					</view> -->
				</view>
			</view>
		</view>
		<view class="systLists">
			<view class="systTitle">
				更多功能
			</view>
			<view class="systLi">
				<view v-for="(item,index) in sysList" :key="index">
					<view class="sys">
						<view class="flex" @click="listChange(index)">
							<view class="pic">
								<image :src="item.icon" mode="aspectFit"></image>
								<text>{{ item.title }}</text>
							</view>
							<view>
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="toContant" type="center">
			<view class="toContants">
				<b>联系我们</b>
				<p>您将跳转到客服聊天框。</p>
				<span>
					<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom">确认</button>
					<button @click="toCh('kf')">取消</button>
				</span>
			</view>
		</uni-popup>
		<uni-popup ref="toShare" type="center">
			<view class="toContants">
				<b>分享小程序</b>
				<p>是否分享这个小程序？</p>
				<span>
					<button open-type="share">确认分享</button>
					<button @click="toCh('fx')">取消分享</button>
				</span>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserData,
		setUserInfo,
		setHasLogin,
		removeToken
	} from '@/utils/storage.js'
	import imageConfig from '@/utils/images.js'
	export default {
		data() {
			return {
				imageUrl: imageConfig.uploadImageUrl,
				userData: getUserData(),
				indexVideoIsLike: false,
				likeNum: 3000,
				imageList: [], //存放照片列表
				orderList: [],
				tagsList: [], // 存放标签
				navHeight: 0, //整体顶部导航栏的高度
				statusBarHeight: 0, //状态栏高度
				indicatorDots: true,
				imageHeight: 1,
				sysList: [], // 存放下拉菜单
				tips:[
					'今天又是元气满满的一天',
					'欢迎您使用哇咔咔wakaka',
					'今天天气很好，不如去滑雪吧！',
					'挥霍的青春，放纵自己。',
					'雪上飞扬，我心飞翔。',
					'这是一场和冰雪的约定。',
					'雪“滑”飘飘，其乐融融。'
				],
				tipsId:0
			}
		},
		onShow() {
			this.userData = this.$options.filters.isLogin()
		},
		onLoad() {
			this.getTips()
			// this.getTips()
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			// console.log(this.navHeight,this.statusBarHeight)
			this.tagsList = [{
						image: this.imageUrl + 'my-home/all.png',
						title: '全部',
						type:''
					},
					{
						image: this.imageUrl + 'my-home/pay.png',
						title: '已支付',
						type:"paid_deposit"
					},
					{
						image: this.imageUrl + 'my-home/cancel.png',
						title: '已取消',
						type:"canceled"
					},
					{
						image: this.imageUrl + 'my-home/ok.png',
						title: '已完成',
						type:"completed"
					},
				],
				this.orderList = [{
						image: this.imageUrl + 'my-home/all.png',
						title: '全部',
						type:''
					},
					{
						image: this.imageUrl + 'my-home/pay.png',
						title: '已支付',
						type:"paid"
					},
					{
						image: this.imageUrl + 'my-home/cancel.png',
						title: '已取消',
						type:"canceled"
					},
					{
						image: this.imageUrl + 'my-home/ok.png',
						title: '已完成',
						type:"completed"
					},
				],
				this.sysList = [{
						icon: this.imageUrl + 'my-home/fenxiang.png',
						title: '分享'
					},
					{
						icon: this.imageUrl + 'my-home/guanzhu.png',
						title: '关注我们'
					},
					{
						icon: this.imageUrl + 'my-home/kefu.png',
						title: '联系客服'
					},
					{
						icon: this.imageUrl + 'my-home/cmer.png',
						title: '摄影师注册'
					},
					{
						icon: this.imageUrl + 'my-home/system.png',
						title: '系统设置'
					}
				]

		},

		methods: {
			getTips(){
				const min = 0;
				const max = this.tips.length -1;
				// 生成随机数
				const a = Math.floor(Math.random() * (max - min + 1)) + min;
				this.tipsId = a
			},
			imageLoad(e) {
				console.log(e)
				this.imageHeight = e.detail.height - this.statusBarHeight * 2
			},
			handleContact (e) {
				console.log(e.detail.path)
				console.log(e)
			},
			listChange(index){
				if(index == 0){
					this.share()
				}else if(index == 1){
					this.linkBtn()
				}else if(index == 2){
					this.$refs.toContant.open()
				}else if(index == 3){
					this.photographerReg()
				}else if(index == 4){
					this.userInfo()
				}
			},
			toCh(type){
				if(type == "kf"){
					this.$refs.toContant.close()
				}else if(type == "fx"){
					this.$refs.toShare.close()
				}
			},
			tagClicks(index) {
				if (index == 0) {

				}
			},
			// 跳转订单页
			orderBtn(item,change) {
				uni.setStorageSync("status", {type:item.type,change:change})
				uni.switchTab({
					url: "/pages/order/index" 
				})
				
			},
			// 个人信息
			userInfo() {
				uni.navigateTo({
					url: "/pages/myhome/user-info"
				})
			},

			share() {
				this.$refs.toShare.open()
				uni.showShareMenu();
			},
			// 加入喜欢
			linkBtn() {
				if (this.indexVideoIsLike) {
					this.indexVideoIsLike = false
					this.likeNum--
					return
				}
				this.likeNum++
				this.indexVideoIsLike = true
			},
			// 摄影师注册
			photographerReg() {
				if(this.userData.haveCameraman){
					uni.showToast({title:'您已经是摄影师了！',icon: 'success',mask: true})
				}else{
					uni.navigateTo({
						url: "/pages/myhome/photographer-reg"
					})
				}
			},
			// 退出登录
			quitLoginBtn() {
				setUserInfo('')
				removeToken()
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		min-height: 95VH;
		width: 100VW;
		background: #f2f6f9;
		padding-bottom: 5VH;
		// overflow: hidden;

		.nav-style {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;

			// background-color: #f2f6f9;
			.baseNames {
				font-size: 32rpx;
				letter-spacing: 0;
				line-height: 48rpx;
				color: #ffffff;
				padding-left: 30rpx;
			}

			.nav-stylebox {
				position: relative;
				z-index: 5;
				margin-top: 10rpx;
				display: flex;
				padding-left: 20rpx;
				align-items: center;

				.uni-icons {
					font-size: 42rpx !important;
					color: #ffffff !important;
				}

				.nav-text {
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #ffffff;
					margin-left: 10rpx;
					display: flex;
					align-items: center;

					.uni-icons {
						margin-left: 10rpx;
						font-size: 22rpx !important;
						color: #ffffff !important;
					}
				}

			}

			.height-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				z-index: -1;

				image {
					width: 100%;
				}
			}

		}

		.baseUsers {
			position: relative;
			z-index: 5;
			width: 690rpx;
			overflow: hidden;
			margin: 0 auto;
			display: flex;
			align-items: flex-end;

			.header {

				display: flex;
				align-items: center;
				justify-content: space-between;

				.avatar {
					margin-right: 15rpx;

					image {
						width: 96rpx;
						height: 96rpx;
						overflow: hidden;
						border-radius: 100%;
					}
				}

				.nick-name {
					font-size: 40rpx;
					font-family: 'PingFang SC', sans-serif;
					font-weight: bold;
					color: #ffffff;
					display: flex;
					align-items: center;
					i{
						display: flex;
						align-items: center;
						image{
							width: 35rpx;
							height: 35rpx;
							margin: 0 15rpx;
							filter: hue-rotate(211deg) brightness(150%);
						}
						font-size: 22rpx;
						color: rgba(255, 255, 255, 0.7);
						font-style: normal;
						font-weight: normal;
					}
				}

				.xinqing {
					font-size: 24rpx;
					font-family: 'PingFang SC', sans-serif;
					font-weight: bold;
					color: #ffffff;
					line-height: 40rpx;
				}
			}
		}

		.systLists {
			margin: 0 auto;
			margin-top: 28rpx;
			width: 690rpx;
			padding-bottom: 30rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.systTitle {
				font-size: 28rpx;
				padding: 20rpx 0;
				margin: 0 20rpx;
				border-bottom: 1rpx #EEEEEE solid;
			}

			.systLi{
				padding:0 20rpx;
				
				.sys{
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					height: 80rpx;
					position: relative;
					.flex{
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					.pic{
						display: flex;
						align-items: center;
						color: #1D2129;
						font-size: 28rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 15rpx;
						}
					}
					
					/deep/.uni-icons{
						font-size: 20rpx !important;
						color: #86909C !important;
					}
					
						
					}
				}
				.bottontoContant{
					position: absolute;
					left: 0;
					top: 0;
					background-color: #7AB4F1;
					// opacity: 0;
					z-index: 50;
					width: 100VW;
					height: 80rpx;
					border:0;
					padding:0;
					&::after { 
						border: none;
					}
				}
			}
		}

		.orderTags {
			position: relative;
			z-index: 4;
			margin: 0 auto;
			margin-top: 28rpx;
			width: 690rpx;
			padding-bottom: 30rpx;

			background: #FFFFFF;
			border-radius: 16rpx;

			.orderTitle {
				font-size: 28rpx;
				padding: 20rpx 0;
				margin: 0 20rpx;
				border-bottom: 1rpx #EEEEEE solid;
			}

			.orderLists {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 163rpx;
				
				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
				}

				p {
					text-align: center;
					margin-top: 16rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}
				.fullOrder{
					position: relative;
					
					i{
						position: absolute;
						left: 45rpx;
						top: -5rpx;
						width: 28rpx;
						height: 28rpx;
						overflow: hidden;
						background: #ff0000;
						color: #ffffff;
						font-size: 20rpx;
						border-radius: 14rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				
			}

		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			// justify-content: center;
			justify-content: space-around;
			align-items: center;
			margin: 0 20rpx;
			margin-top: 28rpx;
			width: 690rpx;
			height: 163rpx;
			background: #FCFCFC;
			border-radius: 27rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				margin: 0 auto;
			}

			p {
				text-align: center;
				margin-top: 16rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
			}
		}

		.quit-login {
			button {
				margin-top: 70rpx;
				color: #FFFFFF;
				font-size: 22rpx;
				width: 400rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #98C9F0;
				border-radius: 25px;
			}
		}

		.wonderful-box {
			margin-top: 30rpx;

			.video-Box {
				// padding-bottom: 100rpx;
				width: 728rpx;
				margin: 20rpx auto;
				columns: 2; // 默认列数
				column-gap: 20rpx; // 列间距

				.lists {
					position: relative;
					overflow: hidden;
					border-radius: 18rpx;
					width: 100%;
					break-inside: avoid;
					margin-bottom: 20rpx;

					image {
						width: 100%;
					}

					.skiingVideo-button {
						// float: right;
						margin-top: -15rpx;
						margin-right: 20rpx;
						bottom: 100rpx;
						display: flex;
						justify-content: flex-end;
						// flex-direction: column;

						align-items: center;
						// justify-content: flex-start;
						padding: 20rpx 0;

						// align-items: center;
						font-size: 32rpx;
						color: #929292;
						text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

						view {
							text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
							font-weight: 600;
						}

						span {
							font-size: 20rpx;
						}


						/deep/.uni-icons {
							margin-right: 10rpx;
							font-size: 30rpx !important;
							color: #929292 !important;

						}

						&.active {
							color: #7AB4F1;

							/deep/.uni-icons {
								font-size: 30rpx !important;
								color: #7AB4F1 !important;
							}
						}
					}

				}
			}
		}
	}
	.toContants{
		width: 590rpx;
		height: 432rpx;
		border-radius: 20rpx;
		background: #ffffff;
		box-shadow: 0px 10rpx 40rpx  rgba(0, 0, 0, 0.05);
		overflow: hidden;
		
		b{
			font-size: 36rpx;
			color: #22242A;
			text-align: center;
			height: 162rpx;
			line-height: 162rpx;
			display: block;
		}
		p{
			color: #8D92A3;
			padding: 40rpx;
			height: 138rpx;
			padding-top: 0;
		}
		span{
			display: flex;
			align-items: flex-end;
			border-top: 2rpx #F1F3F8 solid;
			button{
				width: 50%;
				color: #8D92A3;
				background: #ffffff;
				border-radius: 0;
				
				&:nth-child(1){
					color: #6478D3;
					&::after{
						border-radius: 0;
						border-right:2rpx #F1F3F8 solid;
						margin: 15rpx 0;
					}
				}
				&::after{
					border: 0;
				}
			}
		}
	}
</style>